<template>
  <div ref="chartRef" class="modern-chart" :style="{ width, height }"></div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue'
import * as echarts from 'echarts'

interface Props {
  options: any
  width?: string
  height?: string
  theme?: string
  autoResize?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  width: '100%',
  height: '100%',
  theme: 'dark',
  autoResize: true
})

const chartRef = ref<HTMLDivElement>()
let chartInstance: echarts.ECharts | null = null

// 现代化的默认配置
const getModernConfig = () => ({
  backgroundColor: 'transparent',
  textStyle: {
    color: '#E2E8F0',
    fontSize: 12,
    fontFamily: 'Inter, -apple-system, BlinkMacSystemFont, sans-serif'
  },
  tooltip: {
    backgroundColor: 'rgba(15, 23, 42, 0.95)',
    borderColor: '#3B82F6',
    borderWidth: 1,
    textStyle: { 
      color: '#ffffff',
      fontSize: 12
    },
    extraCssText: 'border-radius: 8px; box-shadow: 0 8px 32px rgba(59, 130, 246, 0.3); backdrop-filter: blur(10px);'
  },
  legend: {
    textStyle: {
      color: '#E2E8F0',
      fontSize: 11
    }
  },
  grid: {
    left: '8%',
    right: '5%',
    bottom: '15%',
    top: '15%',
    containLabel: true
  },
  animation: true,
  animationDuration: 1000,
  animationEasing: 'cubicOut'
})

// 初始化图表
const initChart = () => {
  if (!chartRef.value) return
  
  chartInstance = echarts.init(chartRef.value, props.theme)
  
  // 合并现代化配置
  const modernOptions = {
    ...getModernConfig(),
    ...props.options
  }
  
  chartInstance.setOption(modernOptions, true)
}

// 更新图表配置
const updateChart = () => {
  if (chartInstance && props.options) {
    const modernOptions = {
      ...getModernConfig(),
      ...props.options
    }
    chartInstance.setOption(modernOptions, true)
  }
}

// 调整图表大小
const resizeChart = () => {
  if (chartInstance) {
    chartInstance.resize()
  }
}

// 监听配置变化
watch(() => props.options, updateChart, { deep: true })

// 监听窗口大小变化
const handleResize = () => {
  if (props.autoResize) {
    resizeChart()
  }
}

onMounted(() => {
  nextTick(() => {
    initChart()
  })
  if (props.autoResize) {
    window.addEventListener('resize', handleResize)
  }
})

onUnmounted(() => {
  if (chartInstance) {
    chartInstance.dispose()
    chartInstance = null
  }
  if (props.autoResize) {
    window.removeEventListener('resize', handleResize)
  }
})

// 暴露方法给父组件
defineExpose({
  getInstance: () => chartInstance,
  resize: resizeChart,
  setOption: (option: any) => chartInstance?.setOption(option, true)
})
</script>

<style scoped lang="scss">
.modern-chart {
  position: relative;
  
  // 添加加载动画
  &::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 3px solid rgba(59, 130, 246, 0.3);
    border-top: 3px solid #3B82F6;
    border-radius: 50%;
    animation: chartLoading 1s linear infinite;
    z-index: 1;
  }
  
  // 图表加载完成后隐藏加载动画
  :deep(.echarts-for-react) {
    & + &::before {
      display: none;
    }
  }
}

@keyframes chartLoading {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>